<!-- 
 * @description: 
 * @fileName: computedDemo1.vue 
 * @author: nsl 
 * @date: 2025-04-29 16:48:57
 * @version: V1.0.0 
!-->
<template>
    <div>
        computed demo 1
        <br><br>
        dynamicDep = {{ dynamicDep }}
        count = {{ count  }}
        <br><br>
        <button @click="isEven=!isEven">isEven.value={{isEven }}</button>
        <br><br>
        <button @click="count++">count.value={{ count }}</button>
    </div>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue';

const count = ref(0);
const isEven = ref(true);

let i=10;

const dynamicDep = computed(() => {
  console.log('计算 dynamicDep');
  isEven.value ? count.value : 0; // 动态依赖 count.value
  return i++;
});

// 初始状态
// console.log(dynamicDep.value); // 输出 0（count.value=0），打印"计算 dynamicDep"

// count.value++; // 触发 dynamicDep 重新计算（因为 isEven.value 为 true）
// console.log(dynamicDep.value); // 输出 1，打印"计算 dynamicDep"

// isEven.value = false; // 切换依赖
// count.value++; // 不会触发 dynamicDep 重新计算（因为 isEven.value 为 false）
// console.log(dynamicDep.value); 
    
</script>
<style lang='scss' scoped>
    
</style>